<!--规则设置-->
<template>
  <div>
    <a-modal
      :title="$t('Rule-setting')"
      :visible="visible"
      :width="$store.state.language=='zh'?'50%':'60%'"
      @cancel="handleCancel"
      :maskClosable='false'
      v-dragModal
    >
    <!-- :cancelText="$t('Cancel')" :okText="$t('Sure')"  -->
      <a-spin :spinning="spinning">
      <div class="tips">
        <a-row>
          <a-col :span="1">
            <img src="../../../../../../static/images/disk_check/16_f_ic_tips.png" alt="tip_img"/>
          </a-col>
          <a-col :span="23" v-if="$store.state.language=='zh'">
            <div>当系统已用容量超过<span class="percent_value">85</span>%时，禁止收集系统日志。</div>
            <div>如您有专用的日志服务器，请填写以下信息，以后的系统日志在导出后您可以一键传送到该服务器上进行保存。</div>
          </a-col>
          <a-col :span="23" v-else>
            <div>When the used capacity of the system exceeds <span class="percent_value">85</span>%, it is prohibited to collect system logs.</div>
            <div>If you have a dedicated log server, please fill in the following information. After the system logs are exported, you can click to transfer them to the server for saving.</div>
          </a-col>
        </a-row>
      </div>
      <a-form :form='form'>
        <!--日志服务器地址-->
        <a-form-item :label="$t('Log-server-address')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-input v-decorator="['ip_address',{rules:[{pattern:ipReg,message:$t('Enter-ok-ip')}],
                  initialValue:defaultRules ? defaultRules.ip : ''
                  }]" 
                :placeholder="$t('Enter')+$t('Log-server-address')"></a-input>
        </a-form-item>
        <!--日志服务器地址SCP端口-->
        <a-form-item :label="$t('Log-server-address-SCP')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-input v-decorator="['scp_port',{rules:[{pattern:scpPortReg,message:$t('Enter-ok-scpPort')}],
                  initialValue:defaultRules ? defaultRules.port : ''}]" 
                  :placeholder="$t('Enter')+$t('Log-server-address-SCP')"></a-input>
        </a-form-item>
        <!--日志服务器账号-->
        <a-form-item :label="$t('Log-server-account')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-input v-decorator="['account',{rules:[],
                  initialValue:defaultRules ? defaultRules.username : ''}]" 
                  :placeholder="$t('Enter')+$t('Log-server-account')"></a-input>
        </a-form-item>
        <!--日志服务器密码-->
        <a-form-item :label="$t('Log-server-password')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-input-password v-decorator="['password',{rules:[],
                initialValue:defaultRules ? defaultRules.password : ''}]" 
                  :placeholder="$t('Enter')+$t('Log-server-password')"></a-input-password>
        </a-form-item>
        <!--日志服务器的存储路径-->
        <a-form-item :label="$t('Log-server-store-path')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-input v-decorator="['path',{rules:[],
                  initialValue:defaultRules ? defaultRules.path : ''}]" 
                  :placeholder="$t('Enter')+$t('Log-server-store-path')"></a-input>
        </a-form-item>
        <!--测试日志服务器设置是否有效-->
        <a-form-item :label="$t('Log-server-settings-isok')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-row>
            <a-col :span="19">
              <span style="color:#006db8; cursor:pointer" @click="testSetting">
                {{$store.state.language=='zh'?'测试':'Test'}}
              </span>
            </a-col>
            <a-col :span="5" v-if="isShowValid">
              <div v-if="isValid">
                <img style="margin-right:5px" src="../../../../../../static/images/disk_check/16_f_ic_sure.png" alt="sure_img"/>
                <span>{{$store.state.language=='zh'?'设置有效':'Setting is valid'}}</span>
              </div>
              <div v-else>
                <img style="margin-right:5px" src="../../../../../../static/images/disk_check/16_f_ic_unsure.png" alt="unsure_img"/>
                <span v-if="$store.state.language=='zh'"></span>
                <span>{{$store.state.language=='zh'?'设置无效':'Invalid setting'}}</span>
              </div>
            </a-col>
          </a-row>
        </a-form-item>
        <!--每次收集后自动备份到日志服务器-->
        <a-form-item :label="$t('Log-server-backup-auto')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-checkbox v-model="isChecked" :disabled="isDisabledCheckbox"></a-checkbox>
        </a-form-item>
        <!--导出日志的最长存储时间-->
        <a-form-item :label="$t('Maximum-export-logs-time')" v-bind="$store.state.language=='zh'?formlayout:formlayout2">
          <a-select v-decorator="['time',{
                      rules:[],
                      initialValue:defaultRules ? String(defaultRules.countdown) : ''
                    }]" :placeholder="$t('Choose')+$t('Maximum-export-logs-time')" allowClear>
            <a-select-option v-for="(item,index) in storeTimeArr" :value='item.value' :key="index">
              <span v-if="$store.state.language=='zh'">{{item.text}}</span>
              <span v-else>{{item.en_text}}</span>
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      </a-spin>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          {{$t('Cancel')}}
        </a-button>
        <a-button key="submit" type="primary" @click="handleOk" :loading="isLoadingSubmit">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import request from '@/request/request'

export default {
  name: "SetRule",
  props: ['visible', 'defaultRules'],
  data() {
    return {
      form:this.$form.createForm(this),
      formlayout:{
        labelCol:{span:9},
        wrapperCol:{span:14}
      },
      formlayout2:{
        labelCol:{span:12},
        wrapperCol:{span:12}
      },
      ipReg: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
      scpPortReg: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/,
      isChecked: false,
      isDisabledCheckbox: true,
      storeTimeArr: [
        {text:'1天', en_text:'a day', value: "86400"},
        {text:'3天', en_text:'three day', value: "259200"},
        {text:'1周', en_text:'a week', value: "604800"},
        {text:'1个月', en_text:'a month', value: "2592000"},
        {text:'3个月', en_text:'three months', value: "7776000"},
        {text:'永久', en_text:'forever', value: "-1"},
      ],
      isShowValid: false,
      isValid: false,
      isLoadingSubmit: false,
      spinning: false
    }
  },
  // mounted() {
  //   this.isChecked = this.defaultRules ? (this.defaultRules.is_backup==1?true:false) : false;
  // },
  watch: {
    isValid(newValue) {
      if(newValue) {
        this.isDisabledCheckbox = false;
      }else {
        this.isDisabledCheckbox = true;
      }
    }
  },
  methods: {
    //提交规则
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((err,value)=>{
        if(!err){
          this.isLoadingSubmit = true;
          request('put', 'logmanage/syslog/default/',{
            ip: value.ip_address, //日志服务器地址
            port: value.scp_port, //日志服务器scp端口
            username: value.account, //日志服务器账号
            password: value.password, //日志服务器密码
            path: value.path, //日志服务器的存储路径
            is_backup: this.isChecked?1:0, //自动备份
            countdown: value.time  //最长存储时间
          }).then(res => {
            // console.log('提交设置规则', res)
            if(res.data.flag == 0) {
              this.$emit("updateDefaultRule");
            }
            this.model(res.data.id) //返回模板
            this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
          }).catch(err => {
            // console.log(err)
          }).finally(() => {
            this.handleCancel();
            this.isLoadingSubmit = false;
          })
        }
      })
    },

    //测试设置是否有效
    testSetting() {
      this.form.validateFields((err,value)=>{
        if(!err){
          this.spinning = true;
          request('post', 'logmanage/syslog/default/backup',{
            log_name: 'test', //test代表测试，日志名称代表备份
            ip: value.ip_address, //日志服务器地址
            port: value.scp_port, //日志服务器scp端口
            username: value.account, //日志服务器账号
            password: value.password, //日志服务器密码
            path: value.path, //日志服务器的存储路径
          }).then(res => {
            // console.log('测试设置是否有效', res)
            this.isShowValid = true;
            if(res.data.success) {
              this.isValid = true;
            }else {
              this.isValid = false;
            }
          }).catch(err => {
            console.log(err);
          }).finally(() => {
            this.spinning = false;
          })
        }
      })
    },

    //关闭规则设置弹窗
    handleCancel() {
      this.$emit('closeDialog', 'set_rule');
      this.isShowValid = false;
    },
    
  },
}
</script>
<style scoped>
  ::v-deep.ant-modal-body {
    max-height: 550px;
    overflow: auto;
  }
  ::v-deep.ant-modal {
    top: 50px;
  }
  .tips {
    width: 100%;
    height: 100%;
    padding: 14px;
    margin: 5px 0;
    background-color: rgba(7, 133, 253, 0.1);
    border-radius: 4px;
    border: solid 1px var(--themeColor);
  }
  .tips img {
    margin-right: 5px;
    vertical-align: text-bottom;
  }
  .percent_value {
    color: #006db8;
    font-weight: 700;
  }
</style>